<script setup>
import { Edit, Delete, Search } from '@element-plus/icons-vue'
import { ref } from 'vue'

const dialogVisible = ref(false);
const title = ref('');

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
    pageSize.value = size
    UserList();

}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
    pageNum.value = num
    UserList();
}


const userData = ref([
    {
        username: 'Tom',
        identity: '管理员',
        userDes: 'No. 189',
        createTime: '2016-05-03',
        status: '启用'
    }
])

const userModel = ref({
    username: '',
    identity: '',
    userDes: '',
    createTime: '',
    status: ''
})

const identity = ref('');

import { AllUserManagerInfoService } from '@/api/userManager'

//展示所有文章(或搜索)
const UserList = async () => {
    let params = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        identity: identity.value ? identity.value : null
    }

    let result = await AllUserManagerInfoService(params);
    total.value = result.data.total;
    userData.value = result.data.items;

}
UserList();

const disable = ref(false);
import { addUserManagerService, UpdateUserManagerService, deleteUserManagerService } from '@/api/userManager'
import { ElMessage, ElMessageBox } from 'element-plus';

//新增
const addUserManager = async()=>{
    let result = await addUserManagerService(userModel.value);
    ElMessage.success(result.message ? result.message : '新增成功');
    UserList();
    dialogVisible.value = false;
}

//查看
const SearchDialog = (row) => {
    userModel.value.username = row.username;
    userModel.value.identity = row.identity;
    userModel.value.userDes = row.userDes;
    userModel.value.status = row.status;
    userModel.value.id = row.id;

}

import useUserInfoStore from '@/stores/userInfo';
const userInfoStore = useUserInfoStore();

//修改
const showUpdateDialog = async () => {
    let result = await UpdateUserManagerService(userModel.value);
    ElMessage.success(result.message ? result.message : '修改成功');
    UserList();
    dialogVisible.value = false;
    userInfoStore.setInfo(userModel.value);
}

//删除
const deleteCategory = async(row) => {
    ElMessageBox.confirm(
        '确定要删除吗？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let result = await deleteUserManagerService(row.id);
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            UserList();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

//清空
const clear = () => {
    userModel.value = {
        username: '',
        identity: '',
        userDes: '',
        createTime: '',
        status: ''
    }
}

</script>

<template>
    <el-card class="page-container">
        <!-- 搜索表单 -->
        <el-form inline>
            <el-form-item label="用户名称：">
                <el-input v-model="userData.username" style="width: 240px" placeholder="请输入" clearable />
            </el-form-item>

            <el-form-item label="发布状态：">
                <el-select placeholder="请选择" v-model="identity" style="width: 300px;">
                    <el-option label="管理员" value="管理员"></el-option>
                    <el-option label="普通用户" value="普通用户"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="UserList()">搜索</el-button>
                <el-button @click="identity = ''; userData.username = ''">重置</el-button>
            </el-form-item>
        </el-form>

        <div class="extra">
            <el-button type="primary" @click="dialogVisible = true; title = '新增'; clear()">新增</el-button>
        </div>

        <el-table :data="userData" border style="width: 100%" :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column label="序号" width="100" type="index"> </el-table-column>
            <el-table-column label="用户名称" prop="username"></el-table-column>
            <el-table-column label="用户标识" prop="identity"></el-table-column>
            <el-table-column label="用户描述" prop="userDes"></el-table-column>
            <el-table-column label="创建时间" prop="createTime"></el-table-column>
            <el-table-column label="用户状态" prop="status"></el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="{ row }">
                    <el-button :icon="Search" circle plain type="default"
                        @click="SearchDialog(row); dialogVisible = true; title = '查看'"></el-button>
                    <el-button :icon="Edit" circle plain type="primary"
                        @click="SearchDialog(row); dialogVisible = true; title = '修改'"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteCategory(row)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 15, 20, 25]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />

        <!-- 添加分类弹窗 -->
        <el-dialog v-model="dialogVisible" :title="title" width="30%">
            <el-form :model="userModel" label-width="100px" style="padding-right: 30px">
                <el-form-item label="用户名称">
                    <el-input v-model="userModel.username" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="用户标识">
                    <el-select placeholder="请选择" v-model="userModel.identity" style="width: 100px;">
                        <el-option label="管理员" value="管理员"></el-option>
                        <el-option label="普通用户" value="普通用户"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户描述">
                    <el-input v-model="userModel.userDes" type="textarea" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select placeholder="请选择" v-model="userModel.status" style="width: 100px;">
                        <el-option label="启用" value="启用"></el-option>
                        <el-option label="禁用" value="禁用"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="title == '新增' ? addUserManager() : showUpdateDialog()"> 确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<style>
.page-container {
    min-height: 100%;
    box-sizing: border-box;
    max-width: 100%;
    margin-top: 10px;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>